<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
			</view>
			<view class="flex-col group_3" style="flex-shrink:0;">
				<view class="flex-row section_2" v-for="(item,index) in dataList.service" v-if="item.number!=0">
					<view class="flex-col section_3" :style="{'backgroundImage': `url(${item.master_image})`}">

					</view>
					<view class="flex-col group_4">
						<text class="text_4">{{ item.name }}</text>
						<view class="flex-row group_5">
							<text class="text-money">￥{{item.price}}</text>
							<text class="text-time">/{{item.duration}}小时</text>
						</view>
						<view class="flex-row group_6">
							<text>×{{item.number}}</text>
						</view>
						<!-- <text class="text_8" style="padding-top:10rpx;">已累计成交{{ serve_info.sales }}单</text> -->
					</view>
				</view>
				<!-- <view class="justify-between section_4"
					@click="toPath('/bundle/pages/user_address/user_address?type=select')"> -->
				<view class="justify-between section_4" @click="selectadd">
					<view class="flex-col">
						<view class="flex-row group_8">
							<!-- <image src="/static/confirm_order/1.png" class="image_5" />
							<view class="">
								见面地点
							</view> -->
							<view class="left-group flex-row">
								<image src="/static/confirm_order/1.png" class="image_5" />
								<text class="text_12">见面地点</text>
							</view>
							<view v-if="address_info.address" class="text_9" style="width:480rpx;">
								{{address_info.province}}{{address_info.city}}{{address_info.district}}{{ address_info.address }}
							</view>
							<!-- <view v-else-if="address_info&&!address_info.tel" class="text_9">{{mydizhi}}</view> -->
							<view v-else class="text_9">请选择地址</view>
						</view>


						<view class="flex-row group_9">
							<text>{{ address_info.realname }}</text>
							<text class="text_11">{{ address_info.tel }}</text>
						</view>
					</view>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
						class="image_1 image_7" />
				</view>
				<view class="section_5 justify-between">
					<view class="left-group flex-row">
						<image src="/static/confirm_order/2.png" class="image_5" />
						<text class="text_12">服务达人</text>
					</view>
					<view class="flex-row group_10">
						<text>{{ dataList.nickname }}</text>
						<!-- <image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
							class="image_1 image_9" /> -->
					</view>
				</view>
				<view class="section_5 justify-between" @click="timeClick">
					<view class="left-group flex-row">
						<image src="/static/confirm_order/3.png" class="image_5" />
						<text class="text_12">预约时间<text style="font-size: 20rpx; color: #808080;"></text>
						</text>
					</view>
					<!-- 21333333333333333333333333333333333333333333333333333333333333333333 -->
					<view class="flex-row group_11">
						<text>{{ timeDay }}</text>
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
							class="image_1 image_11" />
					</view>
				</view>
				<view class="flex-col section_6">
					<view class="justify-between group_12">
						<view class="flex-row group_13">
							<image src="/static/confirm_order/4.png" class="image_5" />
							<text class="text_17">出发方式</text>
						</view>
						<view class="flex-row">
							<view v-for="(item,index) in mode" :key="index" class="flex-col items-center text-wrapper_3"
								:class="{'active':travelTypeValue== index + 1}" @click="travelType(index + 1)">
								<text>{{ item }}</text>
							</view>
							<!-- <view class="flex-col items-center text-wrapper_4" :class="{'active':travelTypeValue==2}"
								@click="travelType(2)">
								<text>网约/出租</text>
							</view> -->
						</view>
					</view>
					<view class="justify-between section_7">
						<text class="text_20">全程共

							<text class="text_22">{{ kilometre }}</text>
							km</text>
						<view class="group_15">

							<text class="text_21">往返车费</text>
							<text class="text_22">{{ kilometreValue }}</text>
							<text class="text_23">元</text>
						</view>
					</view>
				</view>
				<view class="section_5 justify-between" v-show="couponList.length" @click="showPopup = true">
					<view class="left-group flex-row">
						<image src="/static/confirm_order/8.png" class="image_5" />
						<text class="text_12">优惠券</text>
					</view>
					<view class="flex-row group_16">
						<view class="flex-col items-center text-wrapper_5" v-if="popup_info.deduction_money">
							<text>-{{ popup_info.deduction_money }}</text>
						</view>
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
							class="image_1 image_14" />
					</view>
				</view>
				<!-- 	<view class="section_8 justify-between">
					<view class="flex-row group_17">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611130353859.png"
							class="image_5" />
						<text class="text_26">订单备注</text>
					</view>
					<view class="flex-row group_18" @click="messageClick">
						<text class="text1" v-if="messageValue">{{messageValue}}</text>
						<text class="text1" v-else>选填</text>
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
							class="image_1 image_16" />
					</view>
				</view> -->
				<view class="section_8 justify-between" v-if="xuzhong==1">
					<view class="flex-row group_17">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611130353859.png"
							class="image_5" />
						<text class="text_26">是否续时</text>
					</view>
					<view class="flex-row group_18">
						<u-switch v-model="value"></u-switch>

					</view>
				</view>
				<view class="section_8 justify-between" v-if="value&&xuzhong==1">
					<view class="flex-row group_17">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844608350397705.png"
							class="image_5" />
						<text class="text_26">选择时长</text>
					</view>
					<view class="flex-row group_18">
						<u-number-box v-model="hour">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="width: 50px;text-align: center;" class="input">{{hour}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#000" size="12"></u-icon>
							</view>
						</u-number-box>

					</view>
				</view>
				<!--支付方式start-->
				<u-radio-group v-model="payType" placement="column" style="display: block;">
					<view class="justify-between section_10" :class="!index ? 'section_9': ''"
						v-for="(item,index) in payList" :key="index" style="flex-shrink:0;">
						<view class="flex-row" style="flex-shrink:0;">
							<image v-if="index === 0" src="/static/confirm_order/5.png" mode="" class="image_5"></image>
							<!-- #ifndef APP -->
							<image v-if="index === 1" src="/static/confirm_order/6.png" mode="" class="image_5"></image>
							<!-- #endif -->
							<!-- #ifdef APP -->
							<image v-if="index === 1" src="/static/confirm_order/7.png" mode="" class="image_5"></image>
							<!-- #endif -->

							<text class="margin_left">{{ item.name }}</text>
							<!-- <text class="text_30" v-if="!index">（余额：￥{{ Number(user.balance) }}）</text> -->
						</view>
						<u-radio active-color="#8538FC" :customStyle="{marginBottom: '8px'}" :key="index"
							:name="item.name">
						</u-radio>
					</view>
				</u-radio-group>
				<!--支付方式end-->
				<view class="flex-col group_22" style="flex-shrink:0;">
					<text class="text_33">下单须知：一旦支付后，往返车费在任何情况下都不再退还。达人工作计时开始后，如果客户原因导致达人提前结束工作，剩余费用也不再退还，请谨慎下单</text>

				</view>
				<view class="group_23 flex" style="flex-shrink:0;">
					<!-- <u-radio-group v-model="radioValue">
						<u-radio shape="circle" activeColor="#5406CD"></u-radio>
					</u-radio-group> -->
					<u-checkbox-group v-model="checkboxValue1" placement="column">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.name" :checked="item.checked"
							activeColor="#8438FC">
						</u-checkbox>
					</u-checkbox-group>
					<text class="text_34"></text>
					<text class="text_35" @click="toPath('/bundle/pages/web/web?title=service')">《用户使用协议》</text>
				</view>
			</view>
		</view>

		<view class="confirm_btn">
			<view class="justify-between section_12">
				<view class="flex-col">
					<view class="flex-row">
						<text class="text_36">合计(￥):</text>
						<view class="group_26">
							<text v-if="value==true"
								class="text_37">{{+commodity+ Number(kilometreValue) - Number(poupon_price)|numFilter }}</text>
							<text v-if="value==false"
								class="text_37">{{+commodity+ Number(kilometreValue) - Number(poupon_price)|numFilter }}</text>
							<text class="text_38"></text>
						</view>
					</view>
					<text
						class="text_39">已优惠{{ poupon_price+(Number(serve_info.price)-Number(serve_info.price)*vip_discount)|numFilter }}元</text>
				</view>
				<view class="flex-col items-center text-wrapper_6" @click="submit">
					<text>立即支付</text>
				</view>
			</view>
		</view>
		<!--留言-->
		<u-popup :show="message" @close="close" :round="30" :closeable='true'>
			<view style="height: 500rpx;padding: 80rpx 30rpx;">
				<u--textarea placeholder="请输入内容" border="surround" clearable count maxlength="200" height="120"
					v-model="messageValue"></u--textarea>
				<u-button text="保存" color="#5406CD" 　style="width: 40%;margin: 30rpx auto;" @click="messageSave">
				</u-button>

			</view>

		</u-popup>
		<!--留言end-->
		<!--预约时间-->
		<u-popup :show="time" @close="close" :round="30" bgColor="#8538FC">
			<view class="time-head">
				<view class="title"> 选择预约时间</view>
				<workTime :timeList='timeList' :getTime='getTime'></workTime>
			</view>
		</u-popup>
		<!--预约时间end-->

		<!-- 选择优惠券 -->
		<u-popup :show="showPopup" @close="close1">
			<view class="popup">
				<view class="popup-header">
					<text>优惠券使用</text>
				</view>

				<view class="content">
					<scroll-view scroll-y="true" style="height: 710rpx;" scroll-with-animation="true">
						<view class="item flex" v-for="(item,index) in couponList" @click="selectPopup(item)"
							:key="index">　
							<view class="left">
								<view class="num">
									<!-- <text>{{ item.money }}</text> -->
									<text style="font-size: 37rpx;" v-if="item.type==1">{{ item.name }}</text>
									<text v-else>¥{{ item.deduction_money }}</text>
								</view>
								<view class="condition">
									<text v-if="item.type==1"></text>
									<text v-else>满{{ item.deduction_condition }}使用</text>
								</view>
							</view>
							<view class="right flex">
								<view class="circular">
									<view class="circular-item" v-for="(item,index) in ['','','','']" :key="index">
									</view>
								</view>
								<view class="explain">
									<view class="title">
										店铺优惠券</view>
									<view class="details">有效期至{{ item.valid_time }}</view>
								</view>

							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- 下单须知 -->
		<u-popup :show="show2" @close="show2=false" :round="15" mode="center">
			<view class="jm-box">
				<view class="" style="font-size: 38rpx;font-weight: bold; text-align: center;margin-bottom: 20rpx;">
					支付须知
				</view>
				<rich-text :nodes="nodes"></rich-text>
				<view @click="show2=false" style="width: 590rpx;margin-top: 20rpx;"
					class="bottomButton flex-row-center">
					知道了
				</view>
			</view>
		</u-popup>
		<Flame-chooseLocation v-model="cityshow" mapkey="XIKBZ-INHKI-FOPGM-URZ5L-FLXZE-DPBVR" @confirm="confirm1">
		</Flame-chooseLocation>
	</view>
</template>

<script>
import workTime from './workTime.vue'
import dateTime from '@/components/weeks-calendars/dateTime.vue'
import tmWeekbar from "@/tm-vuetify/components/tm-weekbar/tm-weekbar"
import tmCartBarFood from "@/tm-vuetify/components/tm-cartBarFood/tm-cartBarFood"
import {
	pay,
	pay1
} from '@/config/utils'
export default {
	components: {
		tmCartBarFood,
		tmWeekbar,
		workTime,
		dateTime
	},
	filters: {
		numFilter (value) {
			// 截取当前数据到小数点后两位
			let realVal = parseFloat(value).toFixed(2)
			return realVal
		}
	},
	data () {
		return {
			cityshow: false,
			show2: false,
			couponList: [],
			showPopup: false,
			checkboxValue1: ['本人已同意'],
			// 基本案列数据
			checkboxList1: [{
				name: '本人已同意',
				disabled: false,
				checked: true
			}],
			message: false, //留言弹出
			messageValue: "", //留言内容
			time: false, //预约弹出
			timeValue: '2021-10-1', //预约时间
			radioValue: false,
			travelTypeValue: 1,

			payList: [{
					name: '余额'
				},

				{
					name: "微信支付"

				},
				// {
				// 	name: '支付宝'
				// }


			],
			// ['wxPay', 'aliPay', 'balance']
			payType: "微信支付",
			// #ifdef APP-PLUS
			payType: "支付宝",
			payList: [{
					name: '余额'
				},
				// {
				// 	name: "微信"

				// },
				{
					name: '支付宝'
				}


			],
			// #endif
			id: '',
			serve_info: {
				"id": '',
				"name": "",
				"price": "",
				"cover": "",
				"discount": '',
				"sales": 0,
				"praise": "",
				"duration": '',
				"coupon": 1
			},
			technician: {
				realname: '',
			},
			address_info: {
				"id": '',
				"realname": "",
				"mobile": "",
				"province": "",
				"city": "",
				"district": "",
				"address": "",
				"is_default": 0
			},
			valuation: [{
				kilometre: 0
			}],
			user: {
				"id": 0,
				"is_vip": 0,
				"balance": null,
				"vip_discount": "0"
			},
			message: false,
			service_time: '', // 时间
			poupon_price: 0,
			available: [], //优惠券
			coupon_id: 0,
			appointment_time_t: '',
			appointment_time_y: '',
			popup_info: {
				"id": 0,
				"name": "",
				"money": "",
				"discount": "",
				"condition": "",
				"type": 0,
				"service_id": 0,
				"start_time": "",
				"end_time": "",
				"reason": "",
				"address_id": '',
				"technician_lat": '',
				"technician_lng": '',

			},
			kilometre: '',
			kilometreValue: "",
			vip_discount: 1,
			technician_lng: 0,
			technician_lat: 0,
			technician_id: 0,
			fatherVal: '',
			zhifubao: '',
			openid: 'oRrdQtxjRnliKyZmVMiY4puivbxs',
			value: false,
			hour: 1,
			xuzhong: 0,
			xingqi1: '',
			dataList: [],
			mode: [],
			timeList: [],
			timeDay: '',
			car: '打车',
			commodity: 0,
			mydizhi: '',
			nodes: ''
		};
	},
	watch: {
		address_info (newVal, oldVal) {
			console.log("地址获取")
			console.log(newVal)
			if (newVal.id) {
				this.address_id = newVal.id
				this.getDistance()
			}
		}
	},
	onLoad (options) {
		/* this.codeid() */
		console.log(options, '-------------------------------');
		// if (options.item) {
		this.item = JSON.parse(options.item)
		this.commodity = this.item.price
		// }
		this.coupon()
		this.xuzhong = options.xuzhong
		let sers = uni.getStorageSync('this.thsDay')
		let data = uni.getStorageSync('dataList')
		this.dataList = data

		// for (var i = 0; i < data.service.length; i++) {
		// 	this.commodity = this.commodity + (data.service[i].price * data.service[i].number)
		// }

		// console.log('*-*-*-*', this.commodity);
		this.$http.post('api/sys/article', {
			id: '4'
		}).then(res => {
			this.nodes = res.content;
			console.log(res);
		})
		this.show2 = true
		this.getNoTime()
		this.getTirp()
		console.log("*****", data);

		this.id = options.id;
		let date = new Date();
		this.appointment_time_y = this.fatherVal
		this.init();
		this.xingqi()
		this.getLat()
	},
	onShow () {
		let address_info = uni.getStorageSync('address_info');
		console.log(address_info, 'info')

		if (address_info) {
			uni.removeStorageSync('address_info');
			let tel = address_info.mobile;
			address_info.tel = tel.slice(0, 3) + '****' + tel.slice(7)
			this.address_info = address_info;
		}
		// if (address_info) {
		// 	// uni.removeStorageSync('address_info');
		// 	let tel = address_info.mobile;
		// 	// address_info.tel = tel.slice(0, 3) + '****' + tel.slice(7)
		// 	this.address_info = address_info;
		// 	this.$http.post('api/map_address', {
		// 		longitude: address_info.longitude,
		// 		latitude: address_info.latitude
		// 	}).then(res => {
		// 		console.log(res, '------------------------');
		// 		this.mydizhi = res.formatted_address
		// 		// this.city = res.addressComponent.city
		// 		// this.init('精选');
		// 	})
		// }

	},
	methods: {
		confirm1 (val) {

			console.log(val, 'valvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalval');

			this.lat = val.location.lat;
			this.lng = val.location.lng;
			var currentSite = {
				province: '',
				city: '',
				district: '',
				address: ''
			};
			if (val.ad_info) {
				currentSite.province = val.ad_info.province
				currentSite.city = val.ad_info.city
				currentSite.district = val.ad_info.district
				currentSite.address = val.address + val.title
			}
			else {
				currentSite.province = val.province
				currentSite.city = val.city
				currentSite.district = val.district
				currentSite.address = val.address + val.title
			}

			this.currentSite = currentSite
			this.address_info = currentSite
			// this.selectLocatin = val
		},
		selectadd () {
			// uni.chooseLocation({
			// 	success: (res) => {
			// 		console.log(res)

			// 		this.address_info.address = res.name
			// 		this.formatted_address = res.name
			// 		this.lat = res.latitude;
			// 		this.lng = res.longitude;
			// 		this.getDistance()
			// 	}
			// })
			this.cityshow = true
		},
		getLat () {
			uni.getLocation({
				altitude: false,
				geocode: true,
				type: 'gcj02',
				success: (res) => {
					console.log(res);
					let {
						latitude,
						longitude,
						address
					} = res;
					this.$http.post('api/map_address', {
						longitude: longitude,
						latitude: latitude
					}).then(res => {
						console.log(res, '------------------------');
						// console.log(JSON.stringify(res), '------------------------');
						this.address_info.address = res.formatted_address
						// this.addressComponent = res.addressComponent
						this.lat = latitude
						this.lon = longitude
						this.formatted_address = res.formatted_address
						// this.city = res.addressComponent.city
						this.getDistance()

					})
				},
				fail: (err) => {
					console.log(err)
				}
			})
		},
		coupon () {
			this.$http.post('api/user/coupon/list', {
				service_id: 0
			}).then(res => {
				console.log(res, "请求到的数据列表优惠券")
				this.couponList = res


			})
		},
		getthsDay (e) {
			console.log(e, "e.data")
			// this.fatherVal = e
		},
		//技师忙时
		getNoTime () {
			this.$http.post('api/get/server/time', {
				technician_id: this.dataList.id
			}).then(res => {
				this.timeList = res
				console.log(res, '///////999///');
			})
		},
		//出行方式
		getTirp () {
			this.$http.post('api/trip_mode').then(res => {
				this.mode = res
			})
		},
		//车费计算
		getKilometre (e) {
			console.log(this.valuation)
			console.log(this.travelTypeValue)
			//this.kilometreValue  =   this.kilometre *
		},
		selectPopup (item) {
			if (Number(this.commodity) < Number(item.deduction_condition)) {
				var title = '满' + item.deduction_condition + '才能使用'
				uni.showToast({
					title: title,
					icon: 'none'
				})
				return
			}
			this.popup_info = item;
			let price = this.serve_info.price;
			this.coupon_id = item.coupon_id;
			// if (item.type === 1) {
			// 	// 折扣券
			// 	this.poupon_price = price * (10 - Number(item.discount)) / 10;
			// } else {
			// 	// 满减券
			this.poupon_price = item.deduction_money;
			// }
			console.log(this.poupon_price)
			this.showPopup = false;
		},
		fill (a) {
			return 10 > a ? '0' + (0 | a) : a
		},
		close1 () {
			this.showPopup = false;
		},
		changeServiceTime (e) {
			console.log(e, "自组件的值")
			// e 就是用户选中的时间，今天的时间没有年，明天的时间有年
			this.service_time = e.time;
			this.appointment_time_y = e.serd
			this.fatherVal = this.appointment_time_y
			let arr = e.time.split(' ');
			this.appointment_time_t = arr[1];
			this.time = false;
		},
		xingqi () {
			console.log('*************');
			var check = [];
			for (let i = 0; i < 7; i++) {
				//24 * 3600 * 1000 就是计算一天的时间  
				var now = new Date();
				var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
				var weekDay = [7, 1, 2, 3, 4, 5, 6];
				var weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

				// console.log(duty);
				//把七天的时间和星期添加到数组中

				check.push({
					date: year + "-" + month + "-" + day,
					day: day,
					weekday: weekDays[dt2.getDay()],
					week: weekDay[dt2.getDay()],
				});

			}
			this.xingqi1 = check[0].week
			uni.setStorageSync('week', check[0].week)
			console.log(check, '*************');

		},
		init () {


		},
		//重新计算
		getDistance () {
			// 获取地址列表

			if (this.travelTypeValue == 1) {
				this.car = '打车'
			} else if (this.travelTypeValue == 2) {
				this.car = '公交'
			} else {
				this.car = '地铁'
			}
			console.log("重新计算", this.address_id)
			this.$http.post('api/get/trip/money', {
				technician_id: this.dataList.id,
				address_id: this.address_id || '',
				sevice_time: this.timeDay,
				trip_mode: this.car,
				// addressComponent: this.addressComponent || '',
				longitude: this.lon,
				latitude: this.lat,
				formatted_address: this.formatted_address || ''
			}).then(res => {
				if (res) {
					this.kilometreValue = res.price
					this.kilometre = res.distance
					this.addid = res.address_id
				}
			})

		},
		changeBack (t) {

		},
		radioChange (e) {
			this.appointment_time_y = e;
		},
		messageClick () {
			this.message = true
		},
		timeClick () {
			this.time = true
		},
		close () {
			this.message = false
			this.time = false
		},
		messageSave () {
			this.message = false
		},
		travelType (e) {


			this.travelTypeValue = e
			console.log(this.travelTypeValue, '/*/*/*888888');
			this.getDistance()
		},
		async submit () {
			var that = this
			// if (!that.address_info.tel) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请先选择地址'
			// 	});
			// 	return
			// }
			if (!that.timeDay) {
				uni.showToast({
					icon: 'none',
					title: '请先选择时间'
				});
				return
			}
			let fuwu = ''
			let fuwuid = ''
			console.log(that.dataList, 'this.dataList');
			for (var i = 0; i < that.dataList.service.length; i++) {
				if (that.dataList.service[i].number != 0) {
					if (fuwuid.length == 0) {
						fuwu = that.dataList.service[i].service_id
						fuwuid = that.dataList.service[i].number
					} else {
						fuwu = fuwu + ',' + that.dataList.service[i].service_id
						fuwuid = fuwuid + ',' + that.dataList.service[i].number
					}

				}
			}
			// #ifdef APP-PLUS
			// if (that.payType == '微信支付') {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '暂未开启'
			// 	});
			// 	return
			// }
			// #endif


			// #ifdef H5
			if (that.payType == '支付宝') {
				uni.showToast({
					icon: 'none',
					title: '暂未开启'
				});
				return
			}
			// #endif
			// if(this.payType=='支付宝'){
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '暂未开启'
			// 	});
			// 	return
			// }
			if (that.payType == '支付宝') {
				that.payType = 'app支付宝'
			}
			if (that.payType == '微信支付') {
				that.payType = 'h5微信'
			}
			console.log(101);
			that.$http.post('api/create/order', {
				technician_id: that.dataList.id,
				// service_ids: fuwu,
				service_ids: this.item.service_id,
				address_id: that.address_id || this.addid,
				sevice_time: that.timeDay,
				trip_mode: that.car,
				remark: that.messageValue,
				coupon_id: that.coupon_id,
				pay_type: that.payType,
				// pay_type: 'h5微信',
				numbers: '1'
				// numbers: fuwuid

			}).then(res => {
				console.log(res, '///////-----///');
				uni.setStorageSync('order_info', {
					payType: res.pay_type,
					order_sn: res.order_sn,
					create_time: res.created_at,
					pay_money: res.money
				})
				if (res.pay_type == '余额') {
					that.$http.post('api/send/sms', {
						phone: that.dataList.phone,

						type: 1

					}).then(res => {
						console.log(res, 'res打印的res ')
						uni.showToast({
							title: res,
							icon: 'success'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/bundle/pages/pay_success/pay_success'
							})

						}, 1000);
					});
				}
				if (res.pay_type == 'h5微信') {
					console.log(res, '*************----');
					pay(res.pay_data).then(res => {
						console.log(res, 'res打印的res ')
						uni.showToast({
							title: res,
							icon: 'success'
						})
						that.$http.post('api/send/sms', {
							phone: that.dataList.phone,
							type: 1

						}).then(res => {
							console.log(res, 'res打印的res ')
							uni.showToast({
								title: res,
								icon: 'success'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/bundle/pages/pay_success/pay_success'
								})

							}, 1000);
						});
					}).catch(re => {
						console.log(re);
					});
				}

				if (res.pay_type == 'app支付宝') {
					console.log(res.pay_type, '99999');
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.pay_data, //支付宝订单数据
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							});
							that.$http.post('api/send/sms', {
								phone: that.dataList.phone,

								type: 1

							}).then(res => {
								console.log(res, 'res打印的res ')
								uni.showToast({
									title: res,
									icon: 'success'
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/bundle/pages/pay_success/pay_success'
									})

								}, 1000);
							});
						},
						fail: function (err) {

							console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							});

						}
					});
				}
				// setTimeout(()=>{
				// 	uni.redirectTo({
				// 	url: '/pages/order/order'
				// })
				// },1000)

			}).catch(re => {
				console.log(re);
			})



		},




		toPath (url) {
			uni.navigateTo({
				url,
			})
		},
		getTime (e, id) {

			this.timeDay = this.timeList[id].date + ' ' + e.start_time
			console.log(this.timeDay, '9981***');
			this.time = false
			this.getDistance()
		}


	}
};
</script>

<style scoped lang="scss">
.jm-box {
	width: 652rpx;
	min-height: 800rpx;
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	padding: 40rpx 30rpx;
	opacity: 1;
}

.bottomButton {
	// margin-right: 30rpx;
	width: 690rpx;
	height: 80rpx;
	background: linear-gradient(90deg, #C74BF1 0%, #8538FC 100%);
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	opacity: 1;
	font-size: 30rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
}

.page {

	background-color: #f8f8f8;
	width: 100%;

	// overflow-y: auto;

	.popup {
		padding: 40rpx 32rpx;
		background-color: white;

		&-header {
			color: rgba(0, 0, 0, 1);
			font-size: 32rpx;
			font-weight: bold;

			text {
				position: relative;
			}

			text::before {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -10rpx;
				content: '';
				width: 8rpx;
				height: 32rpx;
				border-radius: 4rpx;
				background-color: #8438FC;
			}
		}

		.content {
			// height: 900rpx;

			.item {
				width: 95%;
				margin: 20rpx auto;
				height: 180rpx;
				background: #8438FC4D;
				border-radius: 20rpx;

				.right {
					width: 65%;
					height: 180rpx;
					background: #8438FC;
					border-radius: 0 20rpx 20rpx 0;
					float: right;
					position: relative;
					overflow: hidden;

					.circular {
						height: 180rpx;
						display: flex;
						margin-left: -16rpx;
						flex-direction: column;
						justify-content: space-around;

						.circular-item {
							height: 30rpx;
							width: 30rpx;
							border-radius: 50%;
							background: #8438FC4D;

						}
					}

					.explain {
						margin: auto 20rpx;

						.title {
							font-size: 32rpx;
							font-weight: bold;
							font-family: PingFangSC-Medium, PingFang SC;
							color: #FFFFFF;
						}

						.details {
							font-size: 28rpx;
							font-family: PingFang-SC-Regular, PingFang-SC;

							color: #FFFFFF;
						}

					}

					.receive {
						margin-left: 36rpx;
						padding: 10rpx 0 6rpx;
						align-self: center;
						color: #8438FC;
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
						background-image: linear-gradient(124.4deg,
								rgb(255, 255, 255) 0%,
								rgb(255, 255, 255) -13.77%,
								rgb(189, 255, 222) 111.69%,
								rgb(189, 255, 222) 100%);
						box-shadow: 4rpx 6rpx 12rpx 0px rgb(1, 147, 74);
						border-radius: 27rpx;
						width: 108rpx;
						height: 56rpx;
						text-align: center;

					}

					.receive_img {
						width: 130rpx;


						image {
							width: 140rpx;
							height: 140rpx;
							position: absolute;
							bottom: -30rpx;
							right: -20rpx;
						}
					}
				}

				.left {
					width: 40%;
					text-align: center;
					margin: auto 0;

					.num {

						margin: auto;

						color: #FFFFFF;

						text {
							font-family: Price-Bold;
							font-size: 60rpx;
							font-weight: bold;
						}

					}

					.condition {
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #505050;
					}
				}
			}
		}
	}

	.group {
		// height: 1624rpx;

		.section_1 {
			// padding: 38rpx 32rpx 146rpx;
			height: 120rpx;



			.group_2 {
				padding: 0 30rpx;
				margin-top: 32rpx;
				color: rgb(255, 255, 255);
				font-size: 28rpx;
				line-height: 40rpx;


				.image_2 {
					margin: 4rpx 0;
				}

				.text_1 {
					margin-left: 8rpx;
				}

				.image_3 {
					margin: 4rpx 0 4rpx 24rpx;
				}

				.text_2 {
					margin-left: 8rpx;
				}
			}
		}

		.group_3 {
			margin-top: -100rpx;
			padding: 0 32rpx;

			position: relative;

			.section_2 {
				margin-bottom: 10rpx;
				padding: 24rpx 24rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx;

				// height: 320rpx;
				.section_3 {
					padding-top: 140rpx;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					line-height: 34rpx;
					width: 216rpx;
					height: 192rpx;
					border-radius: 12rpx;
					// background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844604386470819.png');
					background-size: cover;
					background-repeat: no-repeat;


					.text-wrapper {
						padding: 8rpx 0 10rpx;
						background-color: rgba(0, 0, 0, 0.36);
						border-radius: 0px 0px 12rpx 12rpx;

						.text_3 {
							margin: 0 6rpx;
						}
					}
				}

				.group_4 {
					margin-left: 24rpx;
					flex: 1 1 auto;

					.text_4 {
						height: 120rpx;
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.group_5 {
						margin-top: 16rpx;
						display: flex;
						align-items: center;

						.text-wrapper_1 {
							/* padding: 4rpx 0; */
							color: rgb(255, 255, 255);
							font-size: 20rpx;
							/* line-height: 28rpx; */
							display: flex;
							justify-content: center;
							align-items: center;

							white-space: nowrap;
							background-color: rgb(243, 151, 53);
							border-radius: 8rpx;
							width: 104rpx;
							height: 36rpx;
						}

						.text-wrapper_2 {
							margin-left: 6rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							color: rgb(243, 151, 53);
							font-size: 20rpx;
							/* line-height: 28rpx; */
							white-space: nowrap;
							border-radius: 8rpx;
							width: 104rpx;
							height: 36rpx;
							border: solid 2rpx rgb(243, 151, 53);
						}
					}

					.group_6 {
						width: 100%;
						/* background-color: #5406CD; */
						display: flex;
						justify-content: flex-end;
						margin-top: -46rpx;
						padding: 0 4rpx;
						color: rgb(102, 102, 102);
						font-size: 26rpx;

						/* 	line-height: 34rpx;
							white-space: nowrap; */


						// .image_4 {
						// 	margin: 6rpx 0 4rpx;
						// 	width: 24rpx;
						// 	height: 24rpx;
						// }

						.text_7 {
							margin-left: 8rpx;
						}
					}

					.text_8 {
						margin-top: 8rpx;
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}
				}
			}

			.section_4 {
				margin-top: 24rpx;
				padding: 16rpx 24rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx 24rpx 0px 0px;

				.image_7 {
					align-self: center;
				}

				.group_8 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;

					.text_9 {
						width: 75%;
						margin-left: 8rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.group_9 {
					margin-top: 6rpx;
					padding: 0 48rpx;
					color: rgb(102, 102, 102);
					font-size: 24rpx;
					line-height: 34rpx;
					white-space: nowrap;

					.text_11 {
						margin-left: 16rpx;
					}
				}
			}

			.section_5 {
				padding: 24rpx 24rpx;
				background-color: rgb(255, 255, 255);

				.left-group {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;

					.text_12 {
						margin-left: 8rpx;
					}
				}

				.group_10 {
					color: #8438FC;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;

					.image_9 {
						margin: 4rpx 0 4rpx 16rpx;
					}
				}

				.group_11 {
					color: #8438FC;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;

					.image_11 {
						margin: 4rpx 0 4rpx 14rpx;
					}
				}

				.group_16 {
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 500;
					line-height: 34rpx;
					white-space: nowrap;

					.text-wrapper_5 {
						padding: 2rpx 0 4rpx;
						background-color: #8438FC;
						border-radius: 8rpx;
						width: 160rpx;
						height: 40rpx;
					}

					.image_14 {
						margin: 4rpx 0 4rpx 16rpx;
					}
				}
			}

			.section_6 {
				padding: 0 24rpx 24rpx;
				background-color: rgb(255, 255, 255);

				.group_12 {
					padding: 24rpx 0;

					.group_13 {
						color: rgb(0, 0, 0);
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						white-space: nowrap;

						.text_17 {
							margin-left: 8rpx;
						}
					}

					.text-wrapper_3 {
						padding: 2rpx 0 4rpx;
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						font-weight: 500;
						line-height: 34rpx;
						white-space: nowrap;
						background-color: rgb(244, 244, 244);
						border-radius: 8rpx;
						width: 140rpx;
						height: 40rpx;

						&.active {
							color: rgb(255, 255, 255);
							background-color: #8438FC;
						}
					}

					.text-wrapper_4 {
						margin-left: 16rpx;
						padding: 2rpx 0 4rpx;
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						font-weight: 500;
						line-height: 34rpx;
						white-space: nowrap;
						background-color: rgb(244, 244, 244);
						border-radius: 8rpx;
						width: 140rpx;
						height: 40rpx;

						&.active {
							color: rgb(255, 255, 255);
							background-color: #8438FC;
						}
					}
				}

				.section_7 {
					margin-top: 20rpx;
					margin-left: 48rpx;
					padding: 12rpx 0;
					background: #8438FC1a;
					border-radius: 16rpx;

					.text_20 {
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						//line-height: 30rpx;
						//white-space: nowrap;
					}

					.group_15 {
						white-space: nowrap;
						height: 40rpx;
						color: rgb(80, 80, 80);
						font-size: 28rpx;
						line-height: 40rpx;

						.text_21 {
							color: rgb(80, 80, 80);
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.text_22 {
							color: #8438FC;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.text_23 {
							color: rgb(80, 80, 80);
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}
				}
			}

			.section_8 {
				padding: 24rpx 24rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 0px 0px 24rpx 24rpx;

				.group_17 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.group_18 {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;

					.text1 {
						text-align: right;
						width: 400rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}

					.image_16 {
						margin: 4rpx 0 4rpx 16rpx;
					}
				}

				.section_11 {
					margin: 6rpx 8rpx 6rpx 0;
					background-color: rgb(255, 255, 255);
					border-radius: 50%;
					width: 28rpx;
					height: 28rpx;
					border: solid 3rpx rgb(102, 102, 102);
				}

				.text_26 {
					margin-left: 8rpx;
				}
			}

			.section_9 {
				margin-top: 24rpx;
				padding: 22rpx 24rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx 24rpx 0px 0px;

				.text_29 {
					margin-left: 8rpx;
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_30 {
					margin-left: 8rpx;
					color: rgb(102, 102, 102);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}

			.section_10 {
				padding: 22rpx 24rpx;
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);

				.text_31 {
					margin-left: 8rpx;
				}
			}

			.margin_left {
				margin-left: 8rpx;
			}

			.view_7 {
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.group_22 {
				margin-top: 24rpx;
				padding-bottom: 76rpx;
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 34rpx;
				position: relative;

				.text_33 {
					margin-right: 6rpx;
					text-align: left;
				}

				.image_23 {
					border-radius: 50%;
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					left: 170rpx;
					bottom: 0;
				}
			}

			.group_23 {
				margin-top: -30rpx;
				align-self: center;
				line-height: 34rpx;
				white-space: nowrap;
				position: relative;
				padding-bottom: 150rpx;

				.text_34 {
					color: rgb(0, 0, 0);
					font-size: 24rpx;
					line-height: 34rpx;
				}

				.text_35 {
					color: #8438FC;
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}

			.image_18 {
				width: 44rpx;
				height: 44rpx;
			}

			.image_5 {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.image_1 {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.confirm_btn {
		bottom: 0;
		position: fixed;
		width: 100vw;
		padding-bottom: 10rpx;
		background-color: rgb(255, 255, 255);

		.section_12 {


			padding: 16rpx 32rpx;
			padding-bottom: env(safe-area-inset-bottom);
			background-color: rgb(255, 255, 255);
			box-shadow: 0px -6rpx 16rpx 0px rgba(0, 0, 0, 0.08);

			.text-wrapper_6 {
				padding: 22rpx 0;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				line-height: 44rpx;
				white-space: nowrap;
				background-color: #8438FC;
				border-radius: 42rpx;
				width: 240rpx;
				height: 88rpx;
			}

			.text_39 {
				margin-top: 8rpx;
				color: #ED0606;
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.text_36 {
				margin-top: 12rpx;
				color: rgb(80, 80, 80);
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.group_26 {
				margin-left: 8rpx;
				white-space: nowrap;
				height: 44rpx;

				.text_37 {
					color: #ED0606;
					font-size: 32rpx;
					line-height: 28rpx;
				}

				.text_38 {
					color: #ED0606;
					font-size: 36rpx;
					line-height: 44rpx;
				}
			}
		}
	}

	.time-head {

		height: 1000rpx;
		/* 	padding: 30rpx 30rpx; */
		padding: 30rpx;
		box-sizing: border-box;
		overflow: scroll;

		.title {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding-bottom: 30rpx;
		}
	}
}

.text-money {
	color: red;
}

.text-time {

	color: #8438FC;
	font-size: 24rpx;
}
</style>